<template>
  <div id="result-wrapper">
    <div class="header">
      <img src="../../common/images/slogan-lg.png" height="278" width="1000"/>
    </div>
    <div class="card">
      <div class="title">投票结果</div>
      <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    </div>
  </div>
</template>

<script>
	import { getRanking } from 'api'
  export default {
    name: 'result',
    data () {
      return {
        myChart:null
      }
    },
    mounted() {
      this.drawLine()
      this.getData()
    },
    methods: {
    	getData() {
    		getRanking().then((res) => {
    			if(res.data){
    				let xdata1=[],count1=[];
    				for(let i=0;i<res.data.length;i++){
    					xdata1.push(res.data[i].name)
	        		count1.push(res.data[i].score)
    				}
	        	this.myChart.setOption({
	        		xAxis:{
	        			data: xdata1
	        		},
            	series: [{
                data: count1
            	}]
            })
        	}
    		})
    	},
    	
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        this.myChart.setOption({
          // title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [{
            name: '得票',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#F48CA7', '#479CD8', '#15C47B', '#C4D37A', '#8B8FF4', '#CAABD8', '#BFD8D5', '#E4406F', '#CDEEAA', '#6E7DA2', '#841818', '#D22780', '#F05D23', '#BBBBBB']
                  return colorList[params.dataIndex]
                }
              }
            },
            data: []
          }]
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  #result-wrapper {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  .header {
    width: 100%;
    height: 100%;
    margin-top: 50px;
  }
  .card {
    padding: 30px;
  }
</style>
